<template>
    <div class="main">
        <div class="head-wrap flex-jsb">
            <div class="flex">
                <el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
                    <el-form-item label="申请单标题：" prop="orderTitle">
                        <el-input size="mini" clearable v-model="form.orderTitle" placeholder="请输入申请单标题"></el-input>
                    </el-form-item>
                    <el-form-item label="所属项目：" prop="proName">
                        <el-input size="mini" clearable v-model="form.proName" placeholder="请输入所属项目"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：" prop="state">
                        <el-select size="mini" v-model="form.state" placeholder="请选择状态">
                            <el-option :label="item.label" :value="item.value" v-for="item in selecData" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button size="mini" @click="handleRset">重置</el-button>
                <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
                <!-- <el-button size="mini" type="primary" @click="handleSelect">收起</el-button> -->
            </div>

        </div>
        <div class="bottom-wrap mt15">
            <el-menu text-color="#666" active-text-color="#21B794" @select="handleNav" :default-active="activeIndex"
                class="el-menu-demo" mode="horizontal" v-if="navBar.length">
                <el-menu-item :index="item.id" v-for="(item) in navBar">{{ item.name }}</el-menu-item>
            </el-menu>
            <div class="table-wrap mt25">
                <el-table :data="showData" height="570" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="orderNum" label="申请单编号" width="190" show-overflow-tooltip/>
                    <el-table-column prop="orderTitle" label="申请单名称"  show-overflow-tooltip/>
                    <el-table-column prop="assetCount" label="申请数量" width="80"/>
                    <el-table-column prop="proName" label="所属项目" width="200" />
                    <el-table-column prop="proLeaderName" label="项目负责人" width="100"/>
                    <el-table-column prop="createUserName" label="申请人" width="80"/>
                    <el-table-column prop="createTime" label="申请时间" width="170">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.createTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stateName" label="状态" width="80">
                        <template slot-scope="scope">
                            <div class="flex-ac">
                                <div :class="['state', scope.row.allocationState == 2 ? 'state2' : 'state1']"></div>
                                <div>{{ scope.row.stateName }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" v-if="scope.row.allocationState == 1" type="text"
                                size="small">分配</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="flex-ac flex-jsb mt15 ">
                    <div>

                    </div>
                    <div class="flex-ac">
                        <div></div>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            class="ml25 systemPagination el-pagination">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import {
    ipAllocationNum,
    ipAllocationList
} from "@/api/ipManageApi.js";
import utils from "@/utils/date.js"

export default {
    components: {},
    data() {
        return {
            selecData: [
                { value: 1, label: "待分配" },
                { value: 2, label: "已分配" },
            ],
            form: {
                orderTitle: "",//
                proName: "",//
                state: "",//
            },
            navBar: [],
            activeIndex: "1",
            ipList: [],
            showData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1
        };
    },
    mounted() {
        this.ipNum();
        this.getIpList();
    },
    methods: {
        // nav 切换
        handleSelect() {
            this.getIpList(this.form);
        },
        ipNum() {
            ipAllocationNum().then(res => {
                if (res.code == "200") {
                    this.navBar.push(...[
                        { name: "全部(" + res.info.totalNum + ")", id: "1" },
                        { name: "待分配(" + res.info.didNotNum + ")", id: "2" },
                        { name: "已分配(" + res.info.hasNum + ")", id: "3" },
                    ])
                }
            })
        },
        // 分配
        handleClick(data) {
            this.$router.push({
                name: "allocation", params: {
                    id: data.id
                }
            })
        },
        handleNav(key) {
            this.activeIndex = key;
            switch (key) {
                case "1":
                    this.getIpList()
                    break;
                case "2":
                    this.getIpList({ state: 1 })
                    break;
                default:
                    this.getIpList({ state: 2 })
                    break;
            }
        },

        //
        getIpList(param) {
            ipAllocationList(param).then(res => {
                if (res.code == "200") {
                    this.ipList = res.info;
                    this.total = res.info.length;
                    this.showData = this.ipList.slice(0, this.pageSize);
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.showData = this.ipList.slice(0, val)

        },

        handleCurrentChange(val) {
            this.showData = this.ipList.slice((val - 1) * this.pageSize, this.pageSize * val)
        },

        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },
        handleRset() {
            this.$refs.form.resetFields();
            this.getIpList()
        },

    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 0 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #F0F0F0;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }


            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #FF9000;
            }

            .state2 {
                background: #21B795;
            }
        }
    }

}

</style>
  
  